<!DOCTYPE html>
<html>
	<head>
		<title>Bootstrap 实例</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,   initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<meta http-equiv="Access-Control-Allow-Origin" content="*">
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	</head>
	<body>

		<div class="container">
			<div class="jumbotron">
				<h1>实现ajax注册</h1>
				<p>重置窗口大小，查看响应式效果！</p>
			</div>
			<div class="row">
				<div class="col-sm-4">
					<h3>第一列</h3>
					<p>学的不仅是技术，更是梦想！</p>
					<p>再牛逼的梦想,也抵不住你傻逼似的坚持也抵不住你傻逼似的坚持也抵不住你傻逼似的坚持！</p>
				</div>
				<div class="col-sm-4">
					<h3>第二列</h3>
					<p>学的不仅是技术，更是梦想！</p>
					<p>再牛逼的梦想,也抵不住你傻逼似的坚持也抵不住你傻逼似的坚持也抵不住你傻逼似的坚持！</p>
				</div>
				<div class="col-sm-4">
					<h3>第三列</h3>
					<p>学的不仅是技术，更是梦想！</p>
					<p>再牛逼的梦想,也抵不住你傻逼似的坚持也抵不住你傻逼似的坚持也抵不住你傻逼似的坚持也抵不住你傻逼似的坚持！</p>
				</div>
			</div>
		</div>
		
		<div class="row" align="center">
			<button type="button" class="btn btn-primary" onclick="editInfo()">注册</button>
			<button type="button" class="btn btn-primary" onclick="editInfo()">登录</button>
		</div>
		


<!-- 模态框（Modal） -->
<div class="modal fade" id="update" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				<h4 class="modal-title" id="myModalLabel">修改信息</h4>
			</div>
			<div class="modal-body">
				<div class="col-sm-10">用户名：<input type="text" name="username" id="username" /></div> 
				<div class="col-sm-10">密码：<input type="text" name="pass" id="pass"/> </div>
				<div class="col-sm-10">性别：<input type="radio" name="sex" class="sex" id="man" value="男"/>男
					  <input type="radio" name="sex" class="sex" id="women" value="女"/>女</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				<button type="button" class="btn btn-primary" onclick="update()">提交</button>
			</div>
		</div>
		<!-- /.modal-content -->
	</div>
	<!-- /.modal -->
</div>
<!-- 模态框（Modal）end -->


		
		<script>


function editInfo() {
	$('#update').modal('show');
}
//提交更改
function update() {
	//获取模态框数据
	var username = $('#username').val();
	var pass = $('#pass').val();
	var sex = $('input:radio[name="sex"]:checked').val();
	$.ajax({
		type: "post",
		url: "http://localhost:7379/test/zhuce",
		data: "username=" + username + "&pass=" + pass + "&name=" + name + "&sex=" + sex,
		dataType: 'json',
		contentType: "application/x-www-form-urlencoded; charset=utf-8",
		success: function(result) {
			if (result.token) {
				localStorage.setItem("token",result.token);
				location.href = 'list.html'
			} else {
				alert("登录失败");
			}
			//location.reload();
		}
	});
}

		</script>
	</body>
</html>
